import eyu from '@/assets/鳄鱼.png'
import { useNavigate } from 'react-router-dom'
import three from '../../assets/3.png'
import five from '../../assets/5.png'
import second from '../../assets/2.png'
import study from '../../assets/studying.png'
import christmas from '../../assets/christmas-decorations.png'
import create from '../../assets/create.png'  
export default function index() {
  const navigate = useNavigate()
  return (
    <div className='bg-orange-50 h-dvh flex flex-col items-center justify-between'>
      <div className="mt-3  h-7 w-[70%] bg-orange-400 rounded-2xl flex items-center justify-center">
        <div className="text-slate-100 text-sm font-bold">
          智慧小宝盒
        </div>
      </div>
      <div className="w-dvw mb-2 flex flex-col items-center justify-between flex-1">
        {/* 汉字 */}
        <div className="relative flex-1 mt-2   w-[85%] bg-yellow-300 rounded-2xl flex items-center justify-center"
          onClick={() => {
            navigate('/characters')
          }}
        >
          <div className='absolute w-7 overflow-hidden top-1 right-14'>
            <img src={create} alt="" />
          </div>
          <div className=" flex items-center">
            <div className='flex flex-col mr-2'>
              <div className='flex items-end'>
                <div className='text-orange-950 font-bold text-3xl'>
                  鳄
                </div>
                <div className='text-orange-950 font-bold text-sm'>
                  鱼
                </div>
              </div>
              <div className='text-pink-600 font-bold text-[24px] mt-[7px]'>
                神奇的汉字
              </div>
            </div>
            <div className='w-14 flex flex-col items-center'>
              <img src={eyu} alt="" />
            </div>
          </div>
        </div>
        {/* 算术训练营 */}
        <div className="flex-1 mt-2  w-[85%] bg-cyan-200 rounded-2xl flex items-center justify-center"
        onClick={()=>{
          navigate('/arithmetic')
        }}
        >
          <div className='flex flex-col items-center justify-between h-[85%]'>
            <div className='text-green-400 text-[26px] font-bold'>
              算术训练营
            </div>
            <div className='flex items-center justify-center'>
              <div className=' w-9 '>
                <img src={five} alt="" />
              </div>
              <div className='w-8'>
                <img src={three} alt="" />
              </div>
              <div className='w-6'>
                <img src={second} alt="" />
              </div>
            </div>
          </div>
          <div className='flex flex-col items-center justify-between h-[85%]'>
            <div className='w-6'>
              <img src={christmas} alt="" />
            </div>
            <div className='w-8'>
            <img src={study} alt="" />
          </div>
          </div>
        </div>
        {/* 单词动物园 */}
        <div className="flex-1 mt-2  w-[85%] bg-orange-300 rounded-2xl flex items-center justify-center">
          <div className="text-white text-sm font-bold">
            单词动物园
          </div>
        </div>
      </div>
    </div>
  )
}
